<template>
  <div class="promoteBusinessComponent" v-if="oItem">
    <div class="content" :style="{backgroundColor:oItem.main.pageBgColor, backgroundImage:'url('+oItem.main.pageBgImg+')'}">
      <div class="head" :style="{backgroundColor:oItem.main.navBgColor,backgroundImage:'url('+oItem.main.navBgImg+')'}">
        <div class="box">
          <div class="section">
            <ul :style="{marginLeft:marginLeft+'px'}">
              <li v-for="(h,index) in heads" :key="h.id" :class="h.active" :style="{color:h.active=='on'?oItem.main.navHighLightFontColor:oItem.main.navFontColor}" @click="switchThis(index)">{{ h.name }}</li>
            </ul>
          </div>
        </div>
        <div class="line" :style="{left:lineLeft+'px'}">
          <span :style="{backgroundColor:oItem.main.navHighLightFontColor}"></span>
        </div>
      </div>
      <div class="body" :style="{backgroundColor:oItem.main.moduleBgColor, backgroundImage:'url('+oItem.main.moduleBgImg+')'}">
        <el-carousel :autoplay="false" :loop="false">
          <el-carousel-item v-for="item in 5" :key="item">
            <p :style="{color:oItem.main.moduleTitleFontColor}">淘宝邀请码：4523687</p>
            <img :src="zhanye1" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="foot" :style="{backgroundColor:oItem.main.bottomBgColor, backgroundImage:'url('+oItem.main.bottomBgImg+')'}">
        <div class="top">
          <img :src="zhanye2" alt="" />
          <span>淘宝推广收益(元)</span>
        </div>
        <ul class="article">
          <li>
            <p class="tit">APP佣金</p>
            <p class="val" :style="{color:oItem.main.bottomDataFontColor}">
              <span class="num">15</span>
              <span class="tag">元/单</span>
            </p>
          </li>
          <li>
            <p class="tit">WAP佣金</p>
            <p class="val" :style="{color:oItem.main.bottomDataFontColor}">
              <span class="num">10</span>
              <span class="tag">元/单</span>
            </p>
          </li>
          <li>
            <p class="tit">话费佣金</p>
            <p class="val" :style="{color:oItem.main.bottomDataFontColor}">
              <span class="num">12</span>
              <span class="tag">元/单</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
import zhanye1 from "@/static/images/zhanye1.jpg";
import zhanye2 from "@/static/images/zhanye2.jpg";
export default {
  name: "promoteBusinessComponent",
  data() {
    return {
      oItem: null,
      heads: [
        { id: 1, name: "查看二维码", active: "on" },
        { id: 2, name: "实时数据", active: "" },
        { id: 3, name: "数据明细", active: "" },
        { id: 4, name: "汇总数据", active: "" },
        { id: 5, name: "展业数据", active: "" },
      ],
      headsIndex: 0,
      oldheadsIndex: 0,
      zhanye1,
      zhanye2,
      marginLeft:0,
      lineLeft:0,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("announcementComponent被通知更新");
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
    switchThis(index){
      this.headsIndex = index;
      this.heads.forEach(item=>{item.active=""});
      this.heads[index].active="on";
      
      if(index==3) {
        if(this.oldheadsIndex<3) {
          this.marginLeft = -200;
          this.lineLeft = oldheadsIndex*100;
        }
      }
      this.oldheadsIndex = index;
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.promoteBusinessComponent {
  .content {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment: fixed;
    padding:15px 0;
    .head {
      background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
      margin: 0px 15px 30px 15px;
      display: flex;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
        -3px -3px 3px #eee;
      position: relative;
      .box {
        display: flex;
        overflow: hidden;
        width: 100%;
        .section {
          width: 200%;
          ul {
            display: flex;
            width: 500px;
            li {
              width: 100px;
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: center;
              user-select: none;
              cursor: pointer;
              transition:all 0.3s;
              &.on {
                color: #f95656;
              }
            }
          }
        }
      }

      .line {position:absolute;
      left:0;bottom:8px;z-index:2;width:110px;display:flex;justify-content:center;
      transition:all 0.3s;
        span {width:20px;height:2px;background-color:red;
        }
      }
    }
    .body {background-color:#fff;border-radius:10px;margin: 0 15px 30px;box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
        -3px -3px 3px #eee;background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
      .el-carousel {
        p {
          display:block;text-align:center;height:90px;line-height:90px;font-size:18px;
        }
        img {width:50%;height:auto;display:block;margin: 0 auto;
        }
      }
    }
    .foot {background-color:#fff;border-radius:10px;margin: 0 15px 15px;box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
        -3px -3px 3px #eee;display:flex;padding:15px;box-sizing:border-box;flex-direction:column;background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
      .top {display:flex; align-items:center;
      margin-bottom:10px;
        img {width:36px;height:36px; margin-right:10px;
        }
        span {font-size:16px;
        }
      }
      .article {display:flex;padding-left:15%;box-sizing:border-box;margin-bottom:10px;
        li {display:flex;flex-direction:column;
        align-items:center;width:33.33%;
          .tit {color:#000;opacity:0.5;
          font-size:14px; margin-bottom:5px;
          }
          .val {display:flex;align-items:flex-end;color:red;
            .num {font-size:22px;
            }
            .tag {font-size:14px;margin-bottom:2px;
            }
          }
        }
      }
    }
  }
}
</style>
